<template>
  <div class="block">
    <el-date-picker
      v-model="value"
      align="right"
      type="date"
      placeholder="选择日期"
      :picker-options="pickerOptions"
    >
    </el-date-picker>
    <div class="btn">
      <el-button icon="el-icon-search" circle @click="queryData"></el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value: "",
    };
  },
  methods: {
    queryData() {
      // console.log(this);
      let date = this.$moment(this.value).format("YYYY-MM-DD");
      // let date = this.$moment('Wed Jul 07 2021 00:00:00 GMT+0800').format('YYYY-MM-DD');
      // console.log("date@@==", date);
      // console.log("emit被触发了");
      this.$emit("query", date);
    },
  },
};
</script>

<style scoped>
/* .block {
  width: 100%;
  height: 100%;
  text-align: center;
  float: left;
}*/
.btn {
  margin-left: 10px;
  display: inline-block;
} 
</style>